<template>
	<view class="page">
		<!-- 自定义头部 navbar -->
		<u-navbar back-icon-name="arrow-left" title=" " :custom-back="navbarBack"
			:background="{ backgroundColor: 'rgba(0,0,0,0)' }" :border-bottom="false" :is-back="true"></u-navbar>

		<!-- logo -->
		<view class="logo-wrap">
			<image class="logo" src="/static/image/login.png"></image>
			<view class="app-name">长沙星工网科技有限公司</view>
		</view>

		<!-- 默认登录页面显示 -->
		<view style="width: 100%;">
			<u-button type="primary" shape="circle" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber"
				v-show="agree_flag"> 手机号快捷登录 </u-button>
			<u-button type="primary" @click="loginByWx" v-show="!agree_flag"> 手机号快捷登录 </u-button>
		</view>

		<!-- 微信授权登录，获取用户信息 -->
		<view style="width: 100%;" v-if="pageStatus == 'getWxRole'">
			<view class="info">为提供优质服务,需要获取你的以下信息 :</view>
			<view class="public">
				<view class="public-dot"></view>
				<view class="public-text">你的公开信息(头像、昵称等)</view>
			</view>
			<view class="text-enter" @click="getWxLoginRole">授权进入</view>
		</view>

		<!-- 微信登录小程序，再授权获取用户信息之后 -->
		<view class="loginWx" v-if="pageStatus == 'loginByWx'">
			<view class="title">欢迎使用 长沙星工网科技有限公司</view>
			<view class="desc">立即登录享受优质服务</view>
			<view class="avatar">
				<image mode="aspectFill" :src="wxLoginUserInfo.userInfo.avatarUrl"></image>
			</view>
			<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">微信用户一键登录</u-button>
		</view>
		<!-- 协议勾选 -->
		<view class="agree">
			<view class="agree_img" @click="changeAgreeFlag" v-show="!agree_flag">
				<image src="../../static/operate/check.png"></image>
			</view>
			<view class="agree_img" @click="changeAgreeFlag" v-show="agree_flag">
				<image src="../../static/operate/checked.png"></image>
			</view>
			<view class="agree_text">
				登录代表您已同意
				<span @click="link_to_page('/pages-home/pages/agreement/service')">《用户服务协议》</span>
				<span @click="link_to_page('/pages-home/pages/agreement/privacy')">《隐私权政策》</span>
			</view>
		</view>
	</view>
</template>

<script>
	import FunUniappTheme from '@/theme.scss';
	export default {
		data() {
			return {
				// 页面状态，默认为 home
				// getWxRole：获取微信权限页，loginByWx：微信授权登录页
				// loginByCode：手机号+验证码登录页，loginByPwd：手机号+密码登录
				// forgetPwd：找回密码页面，resetPwd，重置密码页面
				pageStatus: 'home',
				// 协议是否勾选
				agree_flag: false,
				// 微信授权的用户信息
				wxLoginUserInfo: {},
				// openid
				openId: '',
				// 系统内用户信息
				userInfo: {}
			};
		},
		onLoad() {
			this.getWxCode(code => {
				this.$u.api.getOpenId(code).then(res => {
					this.openId = res.data;
					uni.setStorageSync('OPEN_ID', this.openId);
				});
			});
		},
		onReady() {},
		methods: {
			// 勾选/取消用于协议
			changeAgreeFlag() {
				this.agree_flag = !this.agree_flag;
			},

			// 微信登录
			loginByWx() {
				if (!this.agree_flag) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选协议'
					});
					return;
				}
				this.pageStatus = 'getWxRole';
			},

			// 自定义navbar的返回方法
			navbarBack() {
				uni.navigateBack({
					delta: 1 // 返回上一页
				});
				// if (this.pageStatus == 'getWxRole' || this.pageStatus == 'loginByWx' || this.pageStatus == 'loginByCode') {
				// 	this.pageStatus = 'home';
				// } else if (this.pageStatus == 'forgetPwd' || this.pageStatus == 'resetPwd') {
				// 	this.pageStatus = 'loginByPwd';
				// } else if (this.pageStatus == 'loginByPwd') {
				// 	this.pageStatus = 'loginByCode';
				// }
			},

			// 微信授权
			getWxLoginRole() {
				if (!this.agree_flag) {
					uni.showToast({
						icon: 'none',
						title: '请先阅读并勾选协议'
					});
					return;
				}
				this.getUserInfoByWx(() => {
					this.getWxCode(code => {
						this.getOpenId(code, res => {});
					});
				});
			},

			// 基于uni的获取code方法
			getWxCode(callBack) {
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					success: loginRes => {
						callBack(loginRes.code);
					},
					fail(e) {}
				});
			},

			// 获取openId
			getOpenId(code, callBack) {
				this.$u.api.getOpenId(code).then(res => {
					uni.setStorageSync('OPEN_ID', res.data.Code);
					callBack(res);
				});
			},

			// 获取个人信息
			getUserInfoByWx() {
				let $this = this;
				uni.getUserProfile({
					desc: '获取你的昵称、头像',
					success: function(data) {
						console.log(data);
					},
					fail: function(error) {}
				});
			},

			// 获取手机号回调
			decryptPhoneNumber(e) {
				var code = e?.detail?.code ?? '';
				if (!code) {
					uni.showToast({
						title: '授权失败',
						icon: 'error'
					});
					return;
				}
				this.$u.api.loginGetPhone(code).then(res => {
					if (res.code == 0) {
						this.register(res.data);
					} else {
						uni.showToast({
							title: res?.message ?? '手机号解析失败',
							icon: 'none'
						});
					}
				});
			},
			//注册
			register(telphone) {
				if (!this.openId || !telphone) return;
				var panams = {
					Code: this.openId,
					telphone: telphone
				};
				this.$u.api.loginregister(panams).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '用户注册成功',
							icon: 'none'
						});
						this.link_to_page('/pages/mine/index', 'reLaunch');
					} else {
						uni.showToast({
							title: res?.message ?? '用户注册失败',
							icon: 'none'
						});
					}
				});
			},
			// 微信小程序手机号登录
			loginByOpenId() {
				const openid = uni.getStorageSync('OPEN_ID');
				// this.$u.api.loginByOpenId(openid).then(res => {
				// 	this.userInfo = res;
				// });
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 0 40rpx;
		background-color: $app-theme-bg-color;
	}

	.logo-wrap {
		display: flex;
		justify-content: center;
		padding-top: 100rpx;
		padding-bottom: 240rpx;
		flex-wrap: wrap;

		.logo {
			height: 220rpx;
			width: 220rpx;
		}

		.app-name {
			width: 100%;
			padding-top: 40rpx;
			text-align: center;
			font-size: 44rpx;
			font-weight: 500;
			color: $app-theme-text-black-color;
		}
	}

	.text-area {
		width: 100%;
		height: 96rpx;
		background: $app-theme-color;
		font-weight: 400;
		border-radius: 56rpx;
		color: $app-theme-text-white-color;
		line-height: 16px;
		font-size: 32rpx;
		text-align: center;
		line-height: 96rpx;
		/* background: url(../../static/img/logo_newhope.png); */
	}

	.info {
		font-size: 28rpx;
		font-weight: 400;
		color: $app-theme-text-black-color;
		line-height: 28rpx;
		margin-top: 180rpx;
	}

	.public {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.public-dot {
			width: 6rpx;
			height: 6rpx;
			background: #999999;
			margin-right: 10rpx;
		}

		.public-text {
			font-size: 24rpx;
			font-weight: 400;
			color: #8f92a1;
			line-height: 24rpx;
		}
	}

	.text-enter {
		width: 100%;
		margin-top: 50rpx;
		height: 96rpx;
		background: $app-theme-color;
		font-weight: 400;
		border-radius: 56rpx;
		color: #ffffff;
		line-height: 16px;
		font-size: 32rpx;
		text-align: center;
		line-height: 96rpx;
	}

	.head {
		margin-top: 70rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.back {
		width: 40rpx;
		height: 40rpx;
	}

	.login {
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: $app-theme-color;
		line-height: 32rpx;
		margin-top: 48rpx;
	}

	.agree {
		position: fixed;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: 66rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.agree_img image {
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
	}

	.agree_text {
		margin-left: 8rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #8f92a1;
		line-height: 24rpx;
		display: flex;
		align-items: center;

		span {
			color: $app-theme-color;
		}
	}

	.loginWx {
		width: 100%;
		padding-top: 64rpx;

		.title {
			text-align: left;
			font-size: 22px;
			font-family: PingFang-SC-Regular, PingFang-SC;
			font-weight: 400;
			color: #171717;
			line-height: 30px;
			margin-bottom: 12rpx;
		}

		.desc {
			text-align: left;
			font-size: 14px;
			font-family: PingFang-SC-Regular, PingFang-SC;
			font-weight: 400;
			color: #8f92a1;
			line-height: 14px;
		}

		.avatar {
			width: 160rpx;
			height: 160rpx;
			overflow: hidden;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 128rpx auto 160rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.loginSmsCode {
		width: 100%;
	}

	.smscode {
		font-size: 28rpx;
		font-family: PingFang-SC-Regular, PingFang-SC;
		font-weight: 400;
		color: $app-theme-color;
		line-height: 28rpx;
	}
</style>